<!--资产管理-->
<template>
	<div class="container">
		<el-link icon="el-icon-arrow-left" :underline="false" @click="goBack">返回</el-link>
		<div class="top-part">
			<div class="title">资产管理</div>
			<div class="tabs">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="域名" name="1"></el-tab-pane>
					<el-tab-pane label="信息系统" name="2"></el-tab-pane>
					<!-- <el-tab-pane label="未评测系统" name="3"></el-tab-pane> -->
					<el-tab-pane label="APP" name="4"></el-tab-pane>
					<el-tab-pane label="小程序" name="5"></el-tab-pane>
				</el-tabs>
			</div>
		</div>
		<div class="content-part">
			<div class="search-form">
				<el-form ref="searchForm" :model="searchForm" inline label-position="top">
					<template v-if="activeName === '1'">
						<el-form-item class="form-item" prop="unitName" label="企业名称">
							<el-input v-model="searchForm.unitName" type="text" placeholder="请输入企业"></el-input>
						</el-form-item>
						<el-form-item class="form-item" prop="domainName" label="域名">
							<el-input v-model="searchForm.domainName" type="text" placeholder="请输入域名"></el-input>
						</el-form-item>
						<!-- <el-form-item class="form-item" prop="score" label="安全分数">
              <el-select v-model="searchForm.score" placeholder="请选择">
                <el-option
                  v-for="(it, ind) in scoreDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>-->
						<el-form-item class="form-item" prop="hasIntelligence" label="情报情况">
							<el-select v-model="searchForm.hasIntelligence" placeholder="请选择">
								<el-option v-for="(it, ind) in hasIntelligenceDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="form-item" prop="hasPoliceOrgCode" label="公安备案">
							<el-select v-model="searchForm.hasPoliceOrgCode" placeholder="请选择">
								<el-option v-for="(it, ind) in hasPoliceOrgDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
					</template>
					<template v-if="activeName === '2'">
						<el-form-item class="form-item" prop="systemLevel" label="系统等级">
							<el-select v-model="searchForm.systemLevel" placeholder="请选择">
								<el-option v-for="(it, ind) in systemLevelDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="form-item" prop="gradingType" label="定级方式">
							<el-select v-model="searchForm.gradingType" placeholder="请选择">
								<el-option v-for="(it, ind) in gradingTypeDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="form-item" prop="score" label="安全分数">
							<el-select v-model="searchForm.score" placeholder="请选择">
								<el-option v-for="(it, ind) in scoreDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="form-item" prop="hasIntelligence" label="情报情况">
							<el-select v-model="searchForm.hasIntelligence" placeholder="请选择">
								<el-option v-for="(it, ind) in hasIntelligenceDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="form-item" prop="hasPoliceOrgCode" label="备案">
							<el-select v-model="searchForm.hasPoliceOrgCode" placeholder="请选择">
								<el-option v-for="(it, ind) in hasPoliceOrgDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="form-item" prop="hasTest" label="测评情况">
							<el-select v-model="searchForm.hasTest" placeholder="请选择">
								<el-option v-for="(it, ind) in hasTestDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
					</template>
					<!-- <template v-if="activeName === '3'">
            
            <el-form-item
              class="form-item"
              prop="hasPoliceOrgCode"
              label="公安备案"
            >
              <el-select
                v-model="searchForm.hasPoliceOrgCode"
                placeholder="请选择"
              >
                <el-option
                  v-for="(it, ind) in hasPoliceOrgDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="form-item" prop="systemLevel" label="系统等级">
              <el-select v-model="searchForm.systemLevel" placeholder="请选择">
                <el-option
                  v-for="(it, ind) in systemLevelDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="form-item" prop="gradingType" label="定级方式">
              <el-select v-model="searchForm.gradingType" placeholder="请选择">
                <el-option
                  v-for="(it, ind) in gradingTypeDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              class="form-item"
              prop="hasIntelligence"
              label="情报情况"
            >
              <el-select
                v-model="searchForm.hasIntelligence"
                placeholder="请选择"
              >
                <el-option
                  v-for="(it, ind) in hasIntelligenceDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="form-item" prop="score" label="安全分数">
              <el-select v-model="searchForm.score" placeholder="请选择">
                <el-option
                  v-for="(it, ind) in scoreDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="form-item" prop="systemLevel" label="评估机构">
              <el-input
                v-model="searchForm.unitName"
                type="text"
                placeholder="请输入评估机构"
              ></el-input>
            </el-form-item>
            <el-form-item class="form-item" prop="unitName" label="单位名称">
              <el-input
                v-model="searchForm.unitName"
                type="text"
                placeholder="请输入单位名称"
              ></el-input>
            </el-form-item>
          </template>-->

					<template v-if="activeName === '4'">
						<el-form-item class="form-item" prop="hasPoliceOrgCode" label="公安备案">
							<el-select v-model="searchForm.hasPoliceOrgCode" placeholder="请选择">
								<el-option v-for="(it, ind) in hasPoliceOrgDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="form-item" prop="appName" label="APP名称">
							<el-input v-model="searchForm.appName" type="text" placeholder="请输入APP名称"></el-input>
						</el-form-item>
						<!-- <el-form-item class="form-item" prop="score" label="安全分数">
              <el-select v-model="searchForm.score" placeholder="请选择">
                <el-option
                  v-for="(it, ind) in scoreDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>-->
						<el-form-item class="form-item" prop="hasIntelligence" label="情报情况">
							<el-select v-model="searchForm.hasIntelligence" placeholder="请选择">
								<el-option v-for="(it, ind) in hasIntelligenceDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="form-item" prop="unitName" label="单位名称">
							<el-input v-model="searchForm.unitName" type="text" placeholder="请输入单位名称"></el-input>
						</el-form-item>
					</template>
					<template v-if="activeName === '5'">
						<el-form-item class="form-item" prop="hasPoliceOrgCode" label="公安备案">
							<el-select v-model="searchForm.hasPoliceOrgCode" placeholder="请选择">
								<el-option v-for="(it, ind) in hasPoliceOrgDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="form-item" prop="appletName" label="小程序名称">
							<el-input v-model="searchForm.appletName" type="text" placeholder="请输入小程序名称"></el-input>
						</el-form-item>
						<!-- <el-form-item class="form-item" prop="score" label="安全分数">
              <el-select v-model="searchForm.score" placeholder="请选择">
                <el-option
                  v-for="(it, ind) in scoreDict"
                  :key="ind"
                  :label="it.label"
                  :value="it.value"
                ></el-option>
              </el-select>
            </el-form-item>-->
						<el-form-item class="form-item" prop="hasIntelligence" label="情报情况">
							<el-select v-model="searchForm.hasIntelligence" placeholder="请选择">
								<el-option v-for="(it, ind) in hasIntelligenceDict" :key="ind" :label="it.label"
									:value="it.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="form-item" prop="unitName" label="单位名称">
							<el-input v-model="searchForm.unitName" type="text" placeholder="请输入单位名称"></el-input>
						</el-form-item>
					</template>
				</el-form>
				<div class="form-btn">
					<el-button type="text" @click="resetForm">重置</el-button>
					<el-button @click="search" style="margin-left: 36px">搜索</el-button>
				</div>
			</div>
			<div class="table">
				<el-table v-if="activeName === '1'" ref="table" :data="dataList" :span-method="spanMethod"
					:row-class-name="tableRowClassName">
					<el-table-column align="left" prop="domainName" label="域名" min-width="200">
						<template slot-scope="{ row }">
							<span class="underline">{{ row.domainName }}</span>
						</template>
					</el-table-column>
					<el-table-column align="left" prop="icpRegCode" label="ICP备案号" min-width="160">
						<template slot-scope="{ row }">{{row.icpRegCode || '-'}}</template>
					</el-table-column>
					<el-table-column align="left" prop="policeRegCode" label="公安部备案号" min-width="180">
						<template slot-scope="{ row }">{{row.policeRegCode || '-'}}</template>
					</el-table-column>
					<!-- <el-table-column
            align="center"
            prop="websiteName"
            label="网站名称"
            min-width="100"
          ></el-table-column>-->
					<!-- <el-table-column
            align="center"
            prop="securityScore"
            label="安全分数"
            min-width="120"
          ></el-table-column>-->
					<el-table-column align="left" prop="unitName" label="企业名称" min-width="300">
						<template slot-scope="{ row }">{{row.unitName || '-'}}</template>
					</el-table-column>
				</el-table>
				<el-table v-if="activeName === '2'" ref="table" :data="dataList" :span-method="spanMethod"
					:row-class-name="tableRowClassName">
					<el-table-column align="left" prop="systemName" label="系统名称" min-width="160">
						<template slot-scope="{ row }">{{row.systemName || '-'}}</template>
					</el-table-column>
					<el-table-column align="left" prop="xhRegCode" label="备案号" min-width="200">
						<template slot-scope="{ row }">{{row.xhRegCode || '-'}}</template>
					</el-table-column>
					<el-table-column align="left" prop="systemLevel" label="保护等级" min-width="180">
						<template slot-scope="{ row }">
							<span>
								{{
                systemLevelDict.find((it) => it.value == row.systemLevel)
                ? systemLevelDict.find((it) => it.value == row.systemLevel)
                .label
                : '-'
                }}
							</span>
						</template>
					</el-table-column>
					<el-table-column align="left" prop="hasTest" label="测评情况" min-width="100">
						<template slot-scope="{ row }">
							<span>
								{{
                hasTestDict.find((it) => it.value == row.hasTest)
                ? hasTestDict.find((it) => it.value == row.hasTest)
                .label
                : '-'
                }}
							</span>
						</template>
					</el-table-column>
					<el-table-column align="left" prop="securityScore" label="安全评分" min-width="120">
						<template slot-scope="{ row }">{{row.securityScore || '-'}}</template>
					</el-table-column>
					<el-table-column align="left" prop="evalOrg" label="评估机构" min-width="100">
						<template slot-scope="{ row }">{{row.evalOrg || '-'}}</template>
					</el-table-column>
					<!-- <el-table-column
            align="center"
            prop="hasRetest"
            label="复测情况"
            min-width="100"
          >
            <template slot-scope="{ row }">
              <span>{{
                hasTestDict.find((it) => it.value == row.hasRetest)
                  ? hasTestDict.find((it) => it.value == row.hasRetest).label
                  : ''
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="retestOrg"
            label="复测机构"
            min-width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="gradingProtectionNo"
            label="等保编号"
            min-width="100"
          ></el-table-column>-->
					<el-table-column align="left" prop="unitName" label="企业名称" min-width="300">
						<template slot-scope="{ row }">{{row.unitName || '-'}}</template>
					</el-table-column>
					<el-table-column label="操作" width="50">
						<template slot-scope="{ row }">
							<el-button type="text" size="small" v-if="row.hasTest == 1"
								@click="showDetailDialog(row)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-table v-if="activeName === '4'" ref="table" :data="dataList" :span-method="spanMethod"
					:row-class-name="tableRowClassName">
					<el-table-column align="left" prop="appName" label="APP名称" min-width="200">
						<template slot-scope="{ row }">{{row.appName || '-'}}</template>
					</el-table-column>
					<el-table-column align="left" prop="icpRegCode" label="ICP备案号" min-width="160">
						<template slot-scope="{ row }">{{row.icpRegCode || '-'}}</template>
					</el-table-column>
					<el-table-column align="left" prop="policeRegCode" label="公安部备案号" min-width="180">
						<template slot-scope="{ row }">{{row.policeRegCode || '-'}}</template>
					</el-table-column>
					<!-- <el-table-column
            align="center"
            prop="platform"
            label="运行平台"
            min-width="100"
          ></el-table-column>-->
					<!-- <el-table-column
            align="center"
            prop="securityScore"
            label="安全分数"
            min-width="120"
          ></el-table-column>-->
					<el-table-column align="left" prop="unitName" label="企业名称" min-width="300">
						<template slot-scope="{ row }">{{row.unitName || '-'}}</template>
					</el-table-column>
				</el-table>
				<el-table v-if="activeName === '5'" ref="table" :data="dataList" :span-method="spanMethod"
					:row-class-name="tableRowClassName">
					<el-table-column align="left" prop="appletName" label="小程序名称" min-width="200">
						<template slot-scope="{ row }">{{row.appletName || '-'}}</template>
					</el-table-column>
					<el-table-column align="left" prop="icpRegCode" label="ICP备案号" min-width="160">
						<template slot-scope="{ row }">{{row.icpRegCode || '-'}}</template>
					</el-table-column>
					<el-table-column align="left" prop="policeRegCode" label="公安部备案号" min-width="180">
						<template slot-scope="{ row }">{{row.policeRegCode || '-'}}</template>
					</el-table-column>
					<!-- <el-table-column
            align="center"
            prop="appletId"
            label="APP ID"
            min-width="100"
          ></el-table-column>-->
					<!-- <el-table-column
            align="center"
            prop="securityScore"
            label="安全分数"
            min-width="120"
          ></el-table-column>-->
					<el-table-column align="left" prop="unitName" label="企业名称" min-width="300">
						<template slot-scope="{ row }">{{row.unitName || '-'}}</template>
					</el-table-column>
				</el-table>

				<div class="page">
					<el-pagination layout="prev,slot, next" :total="total" @current-change="currentChange">
						<!-- <el-button type="text" class="prev" disabled>上一页</el-button> -->
						<span class="current">{{ pageNum }}</span>
						<span class="total">
							/{{
              total % pageSize == 0
              ? total / pageSize
              : Math.ceil(total / pageSize)
              }}
						</span>
						<!-- <el-button type="text" class="next">下一页</el-button> -->
					</el-pagination>
				</div>
			</div>
		</div>
		<detailDialog v-model="detailDialogVisible" :row="tableRow" />
	</div>
</template>

<script>
	import {
		searchDomainInfo,
		searchSystemInfo,
		searchAppInfo,
		searchAppletInfo
	} from "@/api/property";
	import detailDialog from "./component/detailDialog.vue";
	export default {
		components: {
			detailDialog
		},
		data() {
			return {
				searchForm: {
					unitName: "",
					domainName: "",
					score: "",
					hasIntelligence: "",
					hasPoliceOrgCode: "",
					systemLevel: "",
					gradingType: "",
					appName: "",
					appletName: ""
				},
				tableRow: null,
				dataList: [{
					a: "上海百万投资管理有限公司",
					d: false,
					e: true,
					f: false,
					g: ["交互式", "有孔", "备案"],
					h: "超过5小时"
				}],
				total: 0,
				pageNum: 1,
				pageSize: 10,
				activeName: "1",
				detailDialogVisible: false
			};
		},
		computed: {
			scoreDict() {
				const list = [{
						label: "0-10",
						value: "0-10"
					},
					{
						label: "10-20",
						value: "10-20"
					},
					{
						label: "20-30",
						value: "20-30"
					},
					{
						label: "30-40",
						value: "30-40"
					},
					{
						label: "40-50",
						value: "40-50"
					},
					{
						label: "50-60",
						value: "50-60"
					},
					{
						label: "60-70",
						value: "60-70"
					},
					{
						label: "70-80",
						value: "70-80"
					},
					{
						label: "80-90",
						value: "80-90"
					},
					{
						label: "90-100",
						value: "90-100"
					}
				];
				return list;
			},
			systemLevelDict() {
				const dict = this.$store.getters.dict;
				const list = [];
				for (let value in dict.systemLevel) {
					list.push({
						label: dict.systemLevel[value],
						value
					});
				}
				return list;
			},
			gradingTypeDict() {
				const dict = this.$store.getters.dict;
				const list = [];
				for (let value in dict.gradingType) {
					list.push({
						label: dict.gradingType[value],
						value
					});
				}

				return list;
			},
			hasIntelligenceDict() {
				const list = [{
						label: "是",
						value: 1
					},
					{
						label: "否",
						value: 0
					}
				];
				return list;
			},
			hasPoliceOrgDict() {
				const list = [{
						label: "是",
						value: 1
					},
					{
						label: "否",
						value: 0
					}
				];
				return list;
			},
			hasTestDict() {
				const list = [{
						label: "是",
						value: 1
					},
					{
						label: "否",
						value: 0
					}
				];
				return list;
			}
		},
		mounted() {
			const tabName = this.$route.query.tabName,
				hasPoliceOrgCode = this.$route.query.hasPoliceOrgCode;
			if (tabName) {
				this.activeName = tabName;
			}
			if (hasPoliceOrgCode) {
				this.searchForm.hasPoliceOrgCode = Number(hasPoliceOrgCode);
			}
			this.search();
		},
		methods: {
			gotoDetail(unitName, unitOrgCode) {
				this.$router.push({
					path: "/enterprise/detail?unitName=" +
						unitName +
						"&unitOrgCode=" +
						unitOrgCode
				});
			},
			handleClick(tab, event) {
				this.resetForm();
				this.getList();
			},
			resetForm() {
				this.searchForm = {
					unitName: "",
					domainName: "",
					score: "",
					hasIntelligence: "",
					hasPoliceOrgCode: "",
					systemLevel: "",
					gradingType: "",
					appName: "",
					appletName: "",
					hasTest: ""
				};
			},
			search() {
				this.pageNum = 1;
				this.getList();
			},
			getList() {
				var elementsToRemove = document.querySelectorAll(".my-mb-28");
				if (elementsToRemove.length > 0) {
					elementsToRemove.forEach(element => {
						element.parentNode.removeChild(element);
					});
				}
				let fn;
				switch (this.activeName) {
					case "1":
						fn = searchDomainInfo;
						break;
					case "2":
						fn = searchSystemInfo;
						break;
						// case '3':
						//   fn = searchSystemInfo
						//   hasTest = 0
						break;
					case "4":
						fn = searchAppInfo;
						break;
					case "5":
						fn = searchAppletInfo;
						break;
					default:
						break;
				}
				fn({
					...this.searchForm,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					startScore: this.searchForm.score ?
						this.searchForm.score.split("-")[0] :
						"",
					endScore: this.searchForm.score ?
						this.searchForm.score.split("-")[1] :
						""
				}).then(res => {
					this.dataList = res.data.list;
					this.total = res.data.total;

					setTimeout(() => {
						this.$refs["table"].doLayout();
						const rowList = this.$refs.table.$el.querySelectorAll(
							".el-table__row.mb-28"
						);
						rowList.forEach(function(element) {
							element.insertAdjacentHTML(
								"afterend",
								'<div class="my-mb-28"></div>'
							);
						});
					}, 500);
				});
			},
			currentChange(page) {
				this.pageNum = page;
				this.getList();
			},
			// 合并表格
			spanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				// 相同unitName合并
				let fields = ["unitName"],
					visibleData = this.dataList;
				const cellValue = row[column.property];
				if (cellValue && fields.includes(column.property)) {
					const prevRow = visibleData[rowIndex - 1];
					let nextRow = visibleData[rowIndex + 1];
					if (prevRow && prevRow[column.property] === cellValue) {
						return {
							rowspan: 0,
							colspan: 0
						};
					} else {
						let countRowspan = 1;
						while (nextRow && nextRow[column.property] === cellValue) {
							nextRow = visibleData[++countRowspan + rowIndex];
						}
						if (countRowspan > 1) {
							return {
								rowspan: countRowspan,
								colspan: 1
							};
						}
					}
				}
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				let nextRow = this.dataList[rowIndex + 1];
				if (nextRow && nextRow["unitName"] !== row["unitName"]) {
					return "mb-28";
				}
			},

			showDetailDialog(row) {
				this.tableRow = row;
				this.detailDialogVisible = true;
			},
			goBack() {
				this.$router.go(-1);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 48px 108px;

		.top-part {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10px 0 20px;

			.title {
				font-size: 26.4px;
			}

			.tabs {
				::v-deep {
					.el-tabs__header {
						margin-bottom: 0;
					}

					.el-tabs__active-bar {
						background: #1c4088;
					}

					.el-tabs__nav-wrap::after {
						display: none;
					}

					.el-tabs__item {
						color: rgba(0, 8, 34, 0.6);

						&.is-active {
							color: #000822;
						}
					}
				}
			}
		}

		.content-part {
			background: #1c4088;
			border-radius: 8px 8px 8px 8px;

			.search-form {
				display: flex;
				justify-content: space-between;
				padding: 20px;

				.form-item {
					width: 190.4px;
					margin-bottom: 0;
					border-left: 0.8px solid rgba(255, 255, 255, 0.3);

					&:first-child {
						border: none;
					}
				}

				.form-btn {
					height: 72px;
					display: flex;
					align-items: center;
					margin-bottom: 0;

					.el-button--text {
						font-size: 16px;
						color: rgba(255, 255, 255, 0.6);
					}

					.el-button--default {
						width: 80px;
						height: 40px;
						background: #000822;
						border-radius: 4px 4px 4px 4px;
						font-size: 16px;
						color: #ffffff;
						border: none;
					}
				}

				::v-deep .el-form-item {
					.el-form-item__label {
						color: #ffffff;
						padding: 0 15.2px;
					}

					.el-input__inner {
						background: #1c4088;
						border: none;
						color: #ffffff;
					}
				}
			}

			.table {
				background: #ffffff;
				box-shadow: 0px 4px 64px 32px rgba(0, 0, 0, 0.05);
				border-radius: 8px 8px 8px 8px;
				padding: 36px;

				::v-deep {
					.el-table {
						td.el-table__cell {
							border: none;
						}

						.el-table__row {
							background: rgba(0, 8, 34, 0.05);
						}

						.my-mb-28 {
							margin-bottom: 28px;
						}
					}
				}

				.underline {
					cursor: pointer;
					color: #e70012;
					border-bottom: 0.8px solid #e70012;

					&.tag {
						color: #606266;
						border-bottom: 0.8px solid rgba(0, 8, 34, 0.6);

						&:not(:last-child) {
							margin-right: 10.4px;
						}
					}
				}

				.actived {
					color: #e70012;
				}

				.page {
					margin-top: 20px;
					text-align: center;
					color: #000822;
					font-size: 13.6px;

					span {
						min-width: auto;
					}

					.current {
						color: #1c4088;
						font-size: 16px;
					}

					.prev {
						color: rgba(0, 8, 34, 0.6);
						margin-right: 40px;
					}

					.next {
						color: rgba(0, 8, 34, 0.6);
						margin-left: 40px;
					}

					// ::v-deep {
					//   .el-pagination .btn-prev {
					//     padding-right: 0;
					//   }
					//   .el-pagination .btn-next {
					//     padding-left: 0;
					//   }
					// }
				}
			}
		}
	}
</style>